<template>
    <div class="app-container" v-loading="loading">
        <el-form ref="form" :model="form" label-width="80px">
            <el-row :gutter="15">
                <el-col :span="24">
                    <MmvTitle title="方案配置"></MmvTitle>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="方案名称" prop="longPlanName">
                        <el-input v-model="form.longPlanName" readonly placeholder="方案名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车型配置" prop="modelInfo">
                        <el-input :value="form.modelInfo" readonly placeholder="品牌车系车型">
                            <!-- <el-button slot="append" icon="el-icon-search" @click="showchexing=true"></el-button> -->
                        </el-input>
                        <el-dialog title="品牌车系车型" :visible.sync="showchexing" width="900px" append-to-body>
                            <el-table :data="configurationList">
                                <!-- <el-table-column label="编号" prop="configurationId"></el-table-column> -->
                                <!-- <el-table-column label="车型id" prop="modelId"></el-table-column> -->
                                <el-table-column label="车型信息" prop="modelInfo"></el-table-column>
                                <el-table-column label="车型名称" prop="modelName"></el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="{row}">
                                        <el-button type="text" @click="form.modelInfo=row.modelInfo,form.configurationId=row.configurationId,showchexing=false">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-dialog>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <MmvTitle title="价格配置"></MmvTitle>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="押金" prop="deposit">
                        <el-input v-model="form.deposit" readonly placeholder="押金"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="月租金" prop="monthlyRent">
                        <el-input v-model="form.monthlyRent" readonly placeholder="月租金"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="付款支持" prop="paymentSupport">
                       <template v-for="item in paymentSupports">
                         <dict-tag :options="dict.type.payment_support" :value="item" />
                         </template>
                        <!-- <el-radio-group v-model="form.paymentSupport">
                            <template v-for="item in dict.type.payment_support">
                                <el-radio :label="item.value" :key="item.value">{{item.label}}</el-radio>
                            </template>
                        </el-radio-group> -->
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import * as planApi from "@/api/longPlan/plan";

export default {
    components: {
        MmvTitle,
    },
    dicts: ['payment_support'],
    props: ['id'],
    data() {
        return {
            loading: false,
            showchexing: false,
            configurationList: [],
            configurationquery: {
                pageNum: 1,
                pageSize: 10,
                modelName: null,
                configurationId: null
            },
            paymentSupports:[],
            form: {
                modelInfo: '',
                longPlanName: '',
                configurationId: '',
                paymentSupport: "1",
                deposit: '',
                monthlyRent: '',
            },
            rules: {
                modelInfo: [{ required: true, message: '车型配置必选' }],
                longPlanName: [{ required: true, message: '方案名称必填' }],
                configurationId: [{ required: true, message: '车型配置必选' }],
                paymentSupport: [{ required: true, message: '车型配置必选' }],
                deposit: [{ required: true, message: '押金必填' }, {
                    validator(rule, value, callback) {
                        if (Number(value) > 0) {
                            callback();
                        } else {
                            callback('押金错误');
                        }
                    },
                }],
                monthlyRent: [{ required: true, message: '月租金必填' }, {
                    validator(rule, value, callback) {
                        if (Number(value) > 0) {
                            callback();
                        } else {
                            callback('月租金错误');
                        }
                    },
                }],
            },
        }
    },
    async mounted() {
        this.loading = true
        if (this.id) {
            await this.getData()
        }
        await this.getConfigurationList()
        this.loading = false;
    },
    methods: {
        /** 获取车型业务配置列表 */
        async getConfigurationList() {
            const result = await planApi.configurationList(this.configurationquery);
            this.configurationList = result.rows || [];
        },
        getData() {
            return planApi.getPlan(this.id).then(response => {
                this.form = response.data
                this.paymentSupports=this.form.paymentSupport.split(",")
                this.configurationquery.configurationId = response.data.configurationId
            })
        },
        validate() {
            return new Promise(resolve => {
                this.$refs.form.validate(valid => {
                    resolve(valid);
                })
            })
        },
        emitData() {
            return new Promise(resolve => {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        resolve(this.form);
                    }
                })
            })
        }
    },
}
</script>